Responsive Design & Media Queries

Responsive design is the practice of building one codebase that adapts gracefully to every screen size — from a 320px phone to a 2560px ultra-wide monitor.

The foundation is the viewport meta tag, which tells the browser to match the device width instead of defaulting to a 980px-wide desktop layout:

<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

Without this tag, mobile browsers zoom out to fit the full desktop layout, making text unreadable.

Key terms:

• Viewport — the visible area of a web page in the browser window
• Breakpoint — a specific viewport width where the layout changes (e.g. 768px)
• Media query — a CSS rule that applies styles only when a condition is met (e.g. screen width ≥ 768px)
• Mobile-first — writing base styles for small screens, then adding complexity via min-width queries

CSS offers several responsive units that scale relative to the viewport or parent. Drag the slider to resize the preview container and watch each box respond.

Media queries let you apply CSS rules based on the viewport width. The @media rule wraps styles that only activate at certain breakpoints:

/* Base: 1 column */
.grid { display: grid; grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr 1fr; }  /* 2 columns */
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1440px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

There are two approaches to writing media queries:

• Mobile-first — base styles for phones, use min-width to add complexity
• Desktop-first — base styles for large screens, use max-width to simplify

Mobile-first is the recommended approach because it forces you to prioritize content and progressive enhancement.

The clamp() function creates fluid typography — font sizes that scale smoothly between a minimum and maximum based on the viewport:

font-size: clamp(MIN, PREFERRED, MAX);
/* Example: */
font-size: clamp(1rem, 2.5vw, 2rem);

Fluid Typography

Current computed size: 1.50rem

Responsive Images

Always ensure images scale within their container:

img {
  max-width: 100%;
  height: auto;         /* maintain aspect ratio */
}

/* For background or hero images: */
.hero-img {
  width: 100%;
  height: 300px;
  object-fit: cover;    /* crop to fill */
}

1. What does the viewport meta tag do?

2. In mobile-first design, which media query adds styles for larger screens?

3. What does clamp(1rem, 2.5vw, 3rem) do for font-size?